<template>
    <div class="article-edit">
        <el-card class="!border-none" shadow="never">
            <el-page-header content="添加平台" @back="$router.back()" />
        </el-card>
        <el-card class="mt-4 !border-none" shadow="never">
            <el-form
                ref="formRef"
                class="ls-form"
                :model="formData"
                label-width="120px"
                :rules="rules"
            >
                <div class="xl:flex">
                    <div>
                        <el-form-item label="独立平台名称" prop="name">
                            <div class="w-120">
                                <el-input
                                    v-model="formData.name"
                                    placeholder="独立平台名称"
                                    maxlength="64"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="联系人姓名" prop="nickname">
                            <div class="w-120">
                                <el-input
                                    v-model="formData.nickname"
                                    placeholder="请输入联系人姓名"
                                    maxlength="64"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="联系人手机号" prop="mobile">
                            <div class="w-120">
                                <el-input
                                    type="tel"
                                    v-model="formData.mobile"
                                    placeholder="请输入联系人手机号"
                                    maxlength="11"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <div class="w-120">
                                <el-input
                                    v-model="formData.password"
                                    placeholder="登录密码"
                                    maxlength="64"
                                    clearable
                                />
                            </div>
                        </el-form-item>
                        <el-form-item label="启用禁用" required prop="isDisable">
                            <el-radio-group v-model="formData.isDisable">
                                <el-radio :label="0">启用</el-radio>
                                <el-radio :label="1">禁用</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="公司资质" prop="certification">
                            <div>
                                <div>
                                    <material-picker v-model="formData.certification" :limit="1" />
                                </div>
                                <div class="form-tips">建议尺寸：240*180px</div>
                            </div>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </el-card>
        <footer-btns>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </footer-btns>
    </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'
import feedback from '@/utils/feedback'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import { add3, detail3, edit1 } from '@/servers/user/api/supplyChaindulipingtaiguanli'

const route = useRoute()
const router = useRouter()
const formData = reactive({
    name: undefined,
    nickname: undefined,
    mobile: undefined,
    password: undefined,
    isDisable: 1,
    certification: undefined
})

const { removeTab } = useMultipleTabs()
const formRef = shallowRef<FormInstance>()
const rules = reactive({
    title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
    cid: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
    pid: [
        {
            required: true,
            message: '请输入密码'
        }
    ]
})

const getDetails = async () => {
    const data = await detail3({
        id: route.query.id as any
    })
    Object.keys(formData).forEach((key) => {
        //@ts-ignore
        formData[key] = data[key]
    })
}

const handleSave = async () => {
    await formRef.value?.validate()
    if (route.query.id) {
        await edit1(
            {
                id: route.query.id as any
            },
            formData as any
        )
    } else {
        await add3(formData as any)
    }
    feedback.msgSuccess('操作成功')
    removeTab()
    router.back()
}

route.query.id && getDetails()
</script>
